import React, { useEffect, useState } from 'react';
import { Outlet, useNavigate } from 'react-router-dom'
import { Layout, Menu, Avatar, Drawer,List,Popover, Divider,Modal } from 'antd';
import { DesktopOutlined, HighlightOutlined, ContactsOutlined, TeamOutlined, CommentOutlined, FileOutlined, BarChartOutlined, SettingOutlined, BellFilled, CaretDownOutlined, CloseOutlined ,ExclamationCircleFilled} from '@ant-design/icons'
import '../styles/Index.scss'
import logo from '../assets/zheng/logo.png'
import {drawerServer,drawerSystem} from '../api/zheng/index'
const { Header, Sider, Content } = Layout;
interface Props {

}
const { confirm } = Modal;
function Index(props: Props) {
    var navigate = useNavigate()
    var [selectedKey, setSelectedKey] = useState('/index/work')
    var [current, setCurrent] = useState('drawer-message')
    var [data, setData] = useState([])
    const [open, setOpen] = useState(false)
    var handleClick = (e: any) => {
        // 跳路由
        navigate(e.key)
        // 保存key值
        setSelectedKey(e.key)
    }
    // 签约管理
    const SignItem = [
        { label: '待处理签约', key: '/index/sign-pending' },
        { label: '签约记录', key: '/index/sign-record' },
    ]
    // 服务管理
    const ServeItem = [
        { label: '待处理服务', key: '/index/serve-pending' },
        { label: '服务记录', key: '/index/serve-record' },
    ]
    // 资料管理
    const InfoItem = [
        { label: '机构管理', key: '/index/info-organization' },
        { label: '团队管理', key: '/index/info-team' },
        { label: '医生管理', key: '/index/info-doctor' },
        { label: '服务包管理', key: '/index/info-service-pack' },
        { label: '服务包项目管理', key: '/index/info-service-project' },
        { label: '业绩目标管理', key: '/index/info-performance' },
    ]
    // 数据统计
    const DataItem = [
        { label: '数据概况', key: '/index/data-survey' },
        { label: '签约业绩统计', key: '/index/data-sign' },
        { label: '服务业绩统计', key: '/index/data-service' },
        { label: '居民健康异常统计', key: '/index/data-health' },
        { label: '居民标签统计', key: '/index/data-tag' },
        { label: '居民年龄统计', key: '/index/data-age' },
        { label: '居民学历统计', key: '/index/data-education' },
        { label: '居民性别统计', key: '/index/data-gender' },
    ]
    // 系统设置
    const SystemItem = [
        { label: '标签管理', key: '/index/system-tag' },
        { label: '角色管理', key: '/index/system-role' },
        { label: '资讯管理', key: '/index/system-consult' },
        { label: '药品管理', key: '/index/system-drug' },
        { label: '轮播图管理', key: '/index/system-swiper' },
        { label: '系统公告', key: '/index/system-notice' },
        { label: '协议管理', key: '/index/system-agreement' },
        { label: '操作日志', key: '/index/system-handle' },
    ]
    // 一级菜单
    const items = [
        { label: '工作台', icon: <DesktopOutlined />, key: '/index/work' },
        { label: '签约管理', icon: <HighlightOutlined />, key: 'sign', children: SignItem },
        { label: '服务管理', icon: <ContactsOutlined />, key: 'serve', children: ServeItem },
        { label: '居民管理', icon: <TeamOutlined />, key: '/index/resident' },
        { label: '消息管理', icon: <CommentOutlined />, key: '/index/message' },
        { label: '资料管理', icon: <FileOutlined />, key: 'info', children: InfoItem },
        { label: '数据统计', icon: <BarChartOutlined />, key: 'data', children: DataItem },
        { label: '系统设置', icon: <SettingOutlined />, key: 'system', children: SystemItem },
    ]
    // 点击消息通知
    const showDrawer = () => {
        setOpen(true)
    }
    // 点击抽屉内的关闭
    const onClose = () => {
        setOpen(false);
    };
    // 初始化挂载
    useEffect(()=>{
        drawerServer().then((res:any)=>{
            setData(res.data)
        })
    },[])
    // 点击抽屉内的导航栏
    const topClick = (e: any) => {
        setCurrent(e.key)
        if(e.key == 'drawer-message'){
            drawerServer().then((res:any)=>{
                setData(res.data)
            })
        }else{
            drawerSystem().then((res:any)=>{
                setData(res.data)
            })
        }
    }
    // 抽屉内导航
    const drawerItems: any = [
        { label: '服务消息', key: 'drawer-message' },
        { label: '系统公告', key: 'drawer-system' },
    ]
    //点击头部右侧显示气泡框
    var mydata = () =>{
        navigate('/index/mydata')
    }
    var resetpass = () =>{
        navigate('/index/resetpass')
    }
    var escsystem = () =>{
        
        confirm({
            title: '退出确认',
            icon: <ExclamationCircleFilled />,
            content: '确定退出系统吗？',
            okText:"确认",
            cancelText:"取消",
            onOk() {
                navigate('/login')
            },
            onCancel() {
              console.log('已取消');
            },
          });
    }
    const content = (
        <div className='popover'>
            <p><a onClick={mydata}>我的资料</a></p>
            <p><a onClick={resetpass}>重置密码</a></p>
            <p><a onClick={escsystem}>退出系统</a></p>
        </div>
    )
    return (
        <div className='index'>
            <Layout className='bigbox'>
                <Sider className='sider'>
                    <h3>家医后台管理系统</h3>
                    <Menu onClick={handleClick} selectedKeys={[selectedKey]} items={items} mode='inline' />
                </Sider>

                <Layout className='main'>
                    <Header>
                        <img src={logo} alt="" />
                        <div className="rightbox">
                            <BellFilled style={{ fontSize: '24px', color: '#ccc' }} onClick={showDrawer} />
                            <Popover content={ content } trigger="click">
                            <div className="topright">
                                <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
                                <p>Daisy Axure</p>
                                <CaretDownOutlined style={{ fontSize: '10px', color: '#ccc' }} />
                            </div>
                            </Popover>
                        </div>
                    </Header>
                    <Content>
                        <Outlet />
                    </Content>
                </Layout>
            </Layout>


            {/* 消息通知-抽屉 */}
            <Drawer rootClassName='drawer' title="消息通知" placement="right" width={520} open={open} closable={false} extra={
                <CloseOutlined onClick={onClose} />
            }>
                <Menu onClick={topClick} selectedKeys={[current]} mode="horizontal" items={drawerItems} />
                <List
                    itemLayout="horizontal"
                    dataSource={data}
                    renderItem={(item:any) => (
                        <List.Item>
                            <List.Item.Meta
                                avatar={<Avatar src={item.src} />}
                                title={<a href="https://ant.design">{item.title}</a>}
                                description={item.description}
                            />
                            <div>{item.time}</div>
                        </List.Item>
                        
                    )}
                />
            </Drawer>
        </div>
    );
}

export default Index;
